<template>
	<view class="drowdown">
		<view @click="showMenu">
			<view class="content" v-if="list.length">
				<!-- <input type="text" placeholder="请选择维修类型" :value="value===1?'设备维修':value===2?'更换部件':''"></input> -->
					<input type="text" placeholder="请选择维修类型" :value="value?list[value-1]:''" placeholder-style="color:#ccc" :disabled="true"></input>
			</view>
			<view class="icon">
				<!-- <uni-icons color="#666" size="16" :type="!flag?'arrowdown':'arrowup'"></uni-icons> -->
				<image src="@/static/images/repairFitting/bottom.png" class="image" v-if="!flag"/>
				<image src="@/static/images/repairFitting/up.png" class="image" v-else/>
			</view>
		</view>
		<view class="menu" v-if="flag">
			<view v-for="(item,index) in list" :key="index" @click.stop="changeData(index,item)" 
			:class="[active===index?'active':'']">
				{{item}}
			</view>
		</view>
		
	</view>
</template>

<script>
export default {
	props:{
		list:{
			type:Array
		},
			 value:''
	},
	data() {
		return {
			flag: false,
			active:'',
				
		};
	},
	watch: {
	},
	methods: {
		showMenu() {
			this.flag = !this.flag; 
			this.$emit('showDropDown');
		},
		changeData(index,item) {
			this.active = index;
			     const timeOut = setTimeout(()=>{
				this.flag = false;
				this.$emit('change',index);
				clearTimeout(timeOut);
			},200);
		}
	},
};
</script>

<style lang="scss">
	.drowdown{
		width: 670rpx;
		height: 80rpx;
		border: 2rpx solid #e9e9e9;
		border-radius: 4rpx;
		box-sizing: border-box;
		position: relative;
		padding: 20rpx 28rpx;
		box-sizing: border-box;
		// background-color: pink;
		// transition: all 0.2s;
		.icon{
			position: absolute;
			right: 20rpx;
			top: 20rpx;
			image{
				width: 28rpx;
				height: 28rpx;
			}
		}
		.content{
			width: 600rpx;
		}
		.menu{
			height:670rpx;
			width: 100%;
			background-color: #fff;
			position: absolute;
			bottom: 0;
			left: 0;
			top: 80rpx;
			padding: 20rpx 28rpx;
			box-sizing: border-box;
			border-top: none;
			z-index: 100;
			border: 2rpx solid #e9e9e9;
			border-top: none;
			view{
				// margin-bottom: 32rpx;
				padding:16rpx;
				text-align: center;
			}
			.active{
				color: #0091ff;
			}
		}
	}
</style>
